export class LessonCode {
  static lesson2code = {
    html1: '<p>插值表达式: {{ currentCustomer }}</p>',
    ts1: `public currentCustomer = '{{...}}';`,
    html2: `
      <img width="100" height="100" src="{{itemImageUrl}}" />
      <img width="120" height="120" [src]="itemImageUrl" />`,
    ts2: `public itemImageUrl = 'https://game.udcode.com/static/game/upload/pingtu/girl1.jpg';`,

    html3: `
      <p>The sum of 1 + 1 is {{1 + 1}}.</p>
      <p>小明是{{ type === 'girl' ? '女孩' : '男孩' }}.</p>`,
    ts3: `public   type = 'boy';`,

    ts4: `
      getVal(): number {
        return 1;
      }`,
    html4: '<p>The sum of 1 + 1 is not {{ 1 + 1 + getVal()}}.</p>',
    html5: `
      <p [ngClass]="{'text-success': true}">这里是样式绑定</p>
      <p [class.text-danger]="true">这里是样式绑定</p>
      <p [ngClass]="classes">这里是样式绑定</p>
      <hr />
      <p [ngStyle]="{'color': 'red'}">style绑定</p>
      <p [style.color]="'green'">style绑定</p>
      <p [ngStyle]="styles">这里是样式绑定</p>`,
    ts5: `
      classes = {
        'text-warning': 'true',
        'text-center': 'true'
      };
      styles = {
        color: '#ffc107',
        textAlign: 'center'
      };`,
    ts7: ` name = '月老';`,
    html7: `
    <div class="form-group">
      <label>我的花名是：{{name}}</label>
      <input type="text" class="form-control" [value]="name" (input)="name=$event.target.value">
    </div>
    <hr />
    <div class="form-group">
      <label>我的花名是：{{name}}</label>
      <input type="text" class="form-control" [ngModel]="name" (ngModelChange)="name=$event">
    </div>
    <hr />
    <div class="form-group">
      <label>我的花名是：{{name}}</label>
      <input type="text" class="form-control" [(ngModel)]="name">
    </div>`,
    html8: `
      <p><input type="text" class="form-control" value="禁止" [attr.title]="'原始属性绑定'" /></p>
      <p><input type="text" class="form-control" value="禁止" [disabled]="true" /></p>
      <p><input type="text" class="form-control" value="只读" [readonly]="true" /></p>
      <p><button type="button" class="btn btn-primary" (click)="onSave()" [disabled]="true">保存</button></p>
      <p><button type="button" class="btn btn-primary" (click)="onSave()" [disabled]="false">保存</button></p>`,

    ts9: `title = '<h3 class="text-info">这里是标题</h3>';`,
    html9: `<div [innerHTML]="title"></div>`,
    ts10: `isBigSize = false;`,
    html10: `
      <p><button type="button" class="btn btn-primary" [style.font-size.em]="isBigSize ? 3 : 1" >保存</button></p>
      <p><button type="button" class="btn btn-primary" [style.font-size.%]="!isBigSize ? 150 : 50" >保存</button></p>`,
    ts11: `show = true;`,
    html11: `
      <p *ngIf="show">*ngIf => 当条件为真，我会被渲染</p>
      <p *ngIf="!show">*ngIf => 当条件为真，我不会被渲染</p>
      <p [hidden]="show">[hidden] => 当条件为真时，我会显示</p>
      <p [hidden]="!show">[hidden] => 当条件为真时，我会显示</p>`,
    ts12: `week =  new Date().getDay();`,
    html12: `
      <div [ngSwitch]="week">
        <p *ngSwitchCase="0">今天是星期日，我很开心</p>
        <p *ngSwitchCase="1">今天是星期一，我很开心</p>
        <p *ngSwitchCase="2">今天是星期二，我很开心</p>
        <p *ngSwitchCase="3">今天是星期三，我很开心</p>
        <p *ngSwitchCase="4">今天是星期四，我很开心</p>
        <p *ngSwitchCase="5">今天是星期五，我很开心</p>
        <p *ngSwitchCase="6">今天是星期六，我很开心</p>
        <p *ngSwitchDefault>不知道今天星期几，我加班很多天了</p>
      </div>`,
    ts121: `
    wondersgroup = [
      { name: '区域卫生事业部', presonNum: 1000},
      { name: '公共卫生事业部', presonNum: 2000}
    ];`,
    html121: `<p *ngFor="let item of wondersgroup">万达信息{{item.name}}总人数为：<span class="text-danger">{{item.presonNum}}</span>人</p>`,
    ts13: `
    onSave() {
      alert('我执行了onSave方法');
    }`,
    html13: `
      <p><button type="button" class="btn btn-primary" (click)="onSave()">保存</button></p>
      <p><button type="button" class="btn btn-primary" (dblclick)="onSave()">保存</button></p>
      <form (submit)="onSave()">
        <button type="submit" class="btn btn-primary">保存</button>
      </form>`,
    html14: `
      <p>当前时间是：{{ 1556721313750 | date:'yyyy-MM-dd HH:mm:ss'}}</p>
      <p>字符串截取：{{ '美国大媒体骂特朗普时触犯“天条”，被吓得立刻道歉整改' | slice:0:9}}...</p>
      <p>百分比：{{ 3 / 100 | percent:'1.2-2'}}</p>
      <p>数字格式化：{{ 1235323 / 10000 | number:'1.0-2'}}万元</p>
      <p>json格式化：{{ {'a': 1, b: 2} | json}}</p>
      <p>字母大写：{{'test' | uppercase}}</p>
      <p>字母小写：{{'TEST' | lowercase}}</p>
      <p>链式管道：{{'TEST' | lowercase | slice:1}}</p>`,
    html14a: `
      //数字格式化
      {{num| number: '3.2-2'}}
      解释:
      {minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
      minIntegerDigits：整数部分保留最小的位数，默认值为1.
      minFractionDigits：小数部分保留最小的位数，默认值为0.
      maxFractionDigits：小数部分保留最大的位数，默认值为3.
      //百分数格式
      {{num| percent:'1.2-2'}}
      解释:
      {minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
      minIntegerDigits：整数部分保留最小的位数，默认值为1.
      minFractionDigits：小数部分保留最小的位数，默认值为0.
      maxFractionDigits：小数部分保留最大的位数，默认值为3.
      //字符串截取
      expression | slice: start[: end] 与java中substring类似
      //日期格式化
      {{date| date:'yyyy-MM-dd HH:mm:ss'}}
      date可以是日期对象，也可以是字符串如：`,
    ts15: `
      presons = [
        {
          name: '小明',
          types: {
            sex: 0,
            age: 18,
            height: 180
          }
        },
        {
          name: '小红'
        }
      ];`,
    html15: `
      <p *ngFor="let preson of presons">{{ preson.name }}：
        性别{{ preson.types && (preson.types.sex === 1 ? '女' : '男') }},
        身高{{ (preson.types && preson.types.height) || '未知' }}
      </p>
      <hr />
      <p *ngFor="let preson of presons">{{ preson.name }}：
        性别{{ preson.types?.sex === 1 ? '女' : '男' }},
        身高{{ preson.types?.height || '未知' }}
      </p>`,
    ts16: `
      // 登录数据
      loginJson = {
        user: '',
        password: '',
        isRememberPwd: ''
      };
      loginMessage = '';
      login($event) {
        this.loginMessage = $event;
      }
      // select数据
      selectItems = {
        bj: '北京',
        tj: '天津'
      };
      `,
    html16: `
      <p myDirective>我这里是p标签,鼠标移上去有效果</p>
      <hr />
      <select class="form-control">
        <option *mySelectDirective="selectItems; let item" [value]="item.key">{{item.value}}</option>
      </select>
      <hr />
      <div class="alert alert-primary">{{loginJson | json}}</div>
      <div class="alert alert-danger">这里子组件传递过来的信息: {{loginMessage}}</div>
      <app-my-component [data]="loginJson" title="这是一个登录组件" (doLogin)="login($event)"></app-my-component>`
  };
  static lesson3code = {
    lesson3One: {
      html1: `
        <p><button ion-button color="primary">测试</button></p>
        <p><button ion-button color="secondary">测试</button></p>
        <p><button ion-button color="success">测试</button></p>
      `,
      html2: `
        <p><button ion-button color="primary" size="small">测试</button></p>
        <p><button ion-button color="secondary">测试</button></p>
        <p><button ion-button color="success" size="large">测试</button></p>
      `,
      html3: `
      <p><button ion-button color="primary">测试</button></p>
      <p><button ion-button color="success" size="large" expand="block">测试</button></p>
      `,
      tsCode: `
        import { Directive, Input, OnInit, ElementRef, Renderer2 } from '@angular/core';
        @Directive({
          selector: 'button[ion-button]'
        })
        export class ButonDirective implements OnInit {
          @Input() color?: string;
          @Input() expand?: string;
          @Input() size?: string;
          buttonColors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
          buttonSizes = {
            large: 'lg',
            small: 'sm'
          };
          constructor(private ele: ElementRef, private render: Renderer2) {
            this.setDefaultClass();
          }
          ngOnInit(): void {
          this.setOtherClass();
          }

          setDefaultClass() {
            const el = this.ele.nativeElement;
            this.render.addClass(el, 'btn');
          }

          setOtherClass() {
            const el = this.ele.nativeElement;
            const inClassList = this.buttonColors.includes(this.color);
            const btnClass = inClassList ? this.color : 'primary';
            this.render.addClass(el, \`btn-\${btnClass}\`);
            if (this.expand && this.expand === 'block') {
              this.render.addClass(el, \`btn-block\`);
            }
            const sizeClass = this.buttonSizes[this.size];
            if (sizeClass) {
              this.render.addClass(el, \`btn-\${sizeClass}\`);
            }
          }
        }`
    },
    lesson3Three: {
      htmlCode: `
        <ion-item>
          {{ '2019-01-10 09:00:00' | myPipe }}
        </ion-item>`,
      tsCode: `
        import { Pipe, PipeTransform } from '@angular/core';
        @Pipe({
          name: 'myPipe'
        })
        export class MyPipePipe implements PipeTransform {
          transform(value: any, args?: any): any {
            const reg = /^(\d{4})-(\d{2})-(\d{2})\s(.+)$/;
            if (reg.test(value)) {
              return value.replace(reg, '$1年$2月$3日');
            }
            return value;
          }
        }`
    }
  };
  static lesson4code = {
    lesson4codeOne: {
      tsCode: `
        import { Component, OnInit } from '@angular/core';
        @Component({
          selector: 'app-lesson4',
          templateUrl: './lesson4.component.html',
          styleUrls: ['./lesson4.component.scss']
        })
        export class Lesson4Component implements OnInit {


          menuActiveIndex = 0;

          /**
           * 右侧菜单配置
           */
          menuTitle = '组件之间的交互';
          menuData = [
            { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true},
            { name: '这是个被禁止的菜单', disabled: true, active: false},
            { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false},
            { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false},
            { name: '父组件监听子组件的事件', disabled: false, active: false},
            { name: '父组件与子组件通过本地变量互动', disabled: false, active: false},
            { name: '父组件调用@ViewChild()', disabled: false, active: false},
            { name: '父组件和子组件通过服务来通讯', disabled: false, active: false}
          ];
          constructor() { }

          ngOnInit() {
          }
        }
      `,
      htmlCode: `<app-lesson4-menu [title]="menuTitle" [data]="menuData"></app-lesson4-menu>`,
      tsCode1: `
        import { Component, OnInit, Input } from '@angular/core';

        @Component({
          selector: 'app-lesson4-menu',
          templateUrl: './lesson4-menu.component.html',
          styleUrls: ['./lesson4-menu.component.scss']
        })
        export class Lesson4MenuComponent implements OnInit {
          @Input() title = '默认title';
          @Input() data: any;
          constructor() { }

          ngOnInit() {
          }

        }
      `,
      htmlCode1: `
        <div class="card" >
          <div class="card-header text-center">{{title}}</div>
          <ul class="list-group list-group-flush">
            <li *ngFor="let item of data" [ngClass]="{'disabled': item.disabled, 'active': item.active}" class="list-group-item">{{item.name}}</li>
          </ul>
        </div>`
    },
    lesson4codeTwo: {
      tsCode: `
        import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-lesson4',
          templateUrl: './lesson4.component.html',
          styleUrls: ['./lesson4.component.scss']
        })
        export class Lesson4Component implements OnInit {


          menuActiveIndex = 0;

          /**
          * 右侧菜单配置
          */
          menuTitle = '组件之间的交互';
          menuData = [
            { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true},
            { name: '这是个被禁止的菜单', disabled: true, active: false},
            { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false},
            { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false},
            { name: '父组件监听子组件的事件', disabled: false, active: false},
            { name: '父组件与子组件通过本地变量互动', disabled: false, active: false},
            { name: '父组件调用@ViewChild()', disabled: false, active: false},
            { name: '父组件和子组件通过服务来通讯', disabled: false, active: false}
          ];
          constructor() { }

          ngOnInit() {
            // 初始化后执行改变标题的方法
            this.changeMenuTitle();
          }

          /**
          * 改变菜单的标题
          */
          changeMenuTitle() {
            setInterval(() => {
              const num = new Date().getSeconds();
              this.menuTitle = \`组件之间的交互\${num}\`;
            }, 1000);
          }
        }`,
      htmlCode: `<app-lesson4-menu [title]="menuTitle" [data]="menuData"></app-lesson4-menu>`,
      tsCode1: `
        import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

        @Component({
          selector: 'app-lesson4-menu',
          templateUrl: './lesson4-menu.component.html',
          styleUrls: ['./lesson4-menu.component.scss']
        })
        export class Lesson4MenuComponent implements OnInit {
          myTitle = '';
          @Input() data: any;
          @Input()
          set title(title: string) {
            const newTitle = title.replace(/\d/g, '');
            console.log(title);
            this.myTitle = newTitle;
          }

          get title(): string { return this.myTitle; }

          constructor() { }

          ngOnInit() {
          }
        }`,
      htmlCode1: `
      <div class="card" >
        <div class="card-header text-center">{{title}}</div>
        <ul class="list-group list-group-flush">
          <li *ngFor="let item of data" [ngClass]="{'disabled': item.disabled, 'active': item.active}" class="list-group-item">{{item.name}}</li>
        </ul>
      </div>`
    },
    lesson4codeThree: {
      tsCode: `
        import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-lesson4',
          templateUrl: './lesson4.component.html',
          styleUrls: ['./lesson4.component.scss']
        })
        export class Lesson4Component implements OnInit {


          menuActiveIndex = 0;

          /**
           * 右侧菜单配置
           */
          menuTitle = '组件之间的交互';
          menuData = [
            { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true},
            { name: '这是个被禁止的菜单', disabled: true, active: false},
            { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false},
            { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false},
            { name: '父组件监听子组件的事件', disabled: false, active: false},
            { name: '父组件与子组件通过本地变量互动', disabled: false, active: false},
            { name: '父组件调用@ViewChild()', disabled: false, active: false},
            { name: '父组件和子组件通过服务来通讯', disabled: false, active: false}
          ];
          constructor() { }

          ngOnInit() {
            // 初始化后执行改变标题的方法
            this.changeMenuTitle();
          }

          /**
           * 改变菜单的标题
           */
          changeMenuTitle() {
            setInterval(() => {
              const num = new Date().getSeconds();
              this.menuTitle = \`组件之间的交互\${num}\`;
            }, 1000);
          }
        }

      `,
        htmlCode: `<app-lesson4-menu [title]="menuTitle" [data]="menuData"></app-lesson4-menu>`,
        tsCode1: `
          import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

          @Component({
            selector: 'app-lesson4-menu',
            templateUrl: './lesson4-menu.component.html',
            styleUrls: ['./lesson4-menu.component.scss']
          })
          export class Lesson4MenuComponent implements OnInit, OnChanges {
            myTitle = '';
            @Input() data: any;
            @Output() changes: EventEmitter<any> = new EventEmitter();
            @Input()
            set title(title: string) {
              const newTitle = title.replace(/\d/g, '');
              this.myTitle = newTitle;
            }

            get title(): string { return this.myTitle; }

            titleChangeNumber = 0;

            constructor() { }

            ngOnInit() {
            }

            ngOnChanges(changes: SimpleChanges): void {
              // 监听title变化
              if (changes.title) {
                this.titleChangeNumber ++;
                const newTitle = changes.title.currentValue.replace(/\d/g, '');
                this.myTitle = newTitle;
              }
            }
          }

        `,
        htmlCode1: `
        <div class="card" >
          <div class="card-header text-center">{{title}}</div>
          <ul class="list-group list-group-flush">
            <li *ngFor="let item of data;"let i = index;"
            [ngClass]="{'disabled': item.disabled, 'active': item.active}"
            class="list-group-item"">{{item.name}}</li>
          </ul>
        </div>
        <hr />
        <h5 class="my-3">菜单标题被改变了 <span class="text-danger">{{titleChangeNumber}}</span> 次</h5>`
    },
    lesson4codeFour: {
      tsCode: `
        import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-lesson4',
          templateUrl: './lesson4.component.html',
          styleUrls: ['./lesson4.component.scss']
        })
        export class Lesson4Component implements OnInit {


          menuActiveIndex = 0;

          /**
           * 右侧菜单配置
           */
          menuTitle = '组件之间的交互';
          menuData = [
            { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true},
            { name: '这是个被禁止的菜单', disabled: true, active: false},
            { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false},
            { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false},
            { name: '父组件监听子组件的事件', disabled: false, active: false},
            { name: '父组件与子组件通过本地变量互动', disabled: false, active: false},
            { name: '父组件调用@ViewChild()', disabled: false, active: false},
            { name: '父组件和子组件通过服务来通讯', disabled: false, active: false}
          ];
          constructor() { }

          ngOnInit() {
            // 初始化后执行改变标题的方法
            this.changeMenuTitle();
          }

          /**
           * 改变菜单的标题
           */
          changeMenuTitle() {
            setInterval(() => {
              const num = new Date().getSeconds();
              this.menuTitle = \`组件之间的交互\${num}\`;
            }, 1000);
          }

          /**
           *
           * 接收到子组件的消息，并设置menuActiveIndex
           */
          changeMenu($event) {
            // 接收到子组件的消息，并设置menuActiveIndex
            this.menuActiveIndex = $event;
          }
        }

        `,
        htmlCode: `<app-lesson4-menu [title]="menuTitle" [data]="menuData" (changes)="changeMenu($event)"></app-lesson4-menu>`,
        tsCode1: `
          import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

          @Component({
            selector: 'app-lesson4-menu',
            templateUrl: './lesson4-menu.component.html',
            styleUrls: ['./lesson4-menu.component.scss']
          })
          export class Lesson4MenuComponent implements OnInit, OnChanges {
            myTitle = '';
            @Input() data: any;
            @Output() changes: EventEmitter<any> = new EventEmitter();
            @Input()
            set title(title: string) {
              const newTitle = title.replace(/\d/g, '');
              this.myTitle = newTitle;
            }

            get title(): string { return this.myTitle; }

            titleChangeNumber = 0;

            constructor() { }

            ngOnInit() {
            }

            ngOnChanges(changes: SimpleChanges): void {
              // 监听title变化
              if (changes.title) {
                this.titleChangeNumber ++;
                const newTitle = changes.title.currentValue.replace(/\d/g, '');
                this.myTitle = newTitle;
              }
            }
            /**
             * 菜单点击事件
             */
            changeMenu(index) {
              this.data.forEach(element => {
                element.active = false;
              });
              this.data[index].active = true;
              // 将切换已经激活的菜单的index告诉父组件
              this.changes.emit(index);
            }
          }

        `,
        htmlCode1: `
        <div class="card" >
          <div class="card-header text-center">{{title}}</div>
          <ul class="list-group list-group-flush">
            <li *ngFor="let item of data;"let i = index;"
            [ngClass]="{'disabled': item.disabled, 'active': item.active}"
            (click)="changeMenu(i)"
            class="list-group-item"">{{item.name}}</li>
          </ul>
        </div>
        <hr />
        <h5 class="my-3">菜单标题被改变了 <span class="text-danger">{{titleChangeNumber}}</span> 次</h5>`
    },
    lesson4codeFive: {
      tsCode: `
        import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-lesson4',
          templateUrl: './lesson4.component.html',
          styleUrls: ['./lesson4.component.scss']
        })
        export class Lesson4Component implements OnInit {


          menuActiveIndex = 0;

          /**
           * 右侧菜单配置
           */
          menuTitle = '组件之间的交互';
          menuData = [
            { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true},
            { name: '这是个被禁止的菜单', disabled: true, active: false},
            { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false},
            { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false},
            { name: '父组件监听子组件的事件', disabled: false, active: false},
            { name: '父组件与子组件通过本地变量互动', disabled: false, active: false},
            { name: '父组件调用@ViewChild()', disabled: false, active: false},
            { name: '父组件和子组件通过服务来通讯', disabled: false, active: false}
          ];
          constructor() { }

          ngOnInit() {
            // 初始化后执行改变标题的方法
            this.changeMenuTitle();
          }

          /**
           * 改变菜单的标题
           */
          changeMenuTitle() {
            setInterval(() => {
              const num = new Date().getSeconds();
              this.menuTitle = \`组件之间的交互\${num}\`;
            }, 1000);
          }

          /**
           *
           * 接收到子组件的消息，并设置menuActiveIndex
           */
          changeMenu($event) {
            // 接收到子组件的消息，并设置menuActiveIndex
            this.menuActiveIndex = $event;
          }
        }

      `,
      htmlCode: `
        <div class="pr-3 text-secondary" [ngClass]="{'text-success': menu.intervalId !== null}">
          当前时间为：{{menu.nowTime | date: 'yyyy-MM-dd HH:mm:ss'}}
        </div>
        <div class="btns pr-5">
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="menu.intervalId !== null" (click)="menu.startTimer()"><i class="fa fa-play fa-fw"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="menu.intervalId === null" (click)="menu.stopTimer()"><i class="fa fa-stop fa-fw"></i>
          </button>
        </div>
        <!--子组件-->
        <app-lesson4-menu #menu [title]="menuTitle" [data]="menuData" (changes)="changeMenu($event)"></app-lesson4-menu>`,
      tsCode1: `
        import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

        @Component({
          selector: 'app-lesson4-menu',
          templateUrl: './lesson4-menu.component.html',
          styleUrls: ['./lesson4-menu.component.scss']
        })
        export class Lesson4MenuComponent implements OnInit, OnChanges {
          myTitle = '';
          @Input() data: any;
          @Output() changes: EventEmitter<any> = new EventEmitter();
          @Input()
          set title(title: string) {
            const newTitle = title.replace(/\d/g, '');
            this.myTitle = newTitle;
          }

          get title(): string { return this.myTitle; }

          titleChangeNumber = 0;

          nowTime = new Date().getTime(); // 当前时间

          intervalId = 0; // 定时器ID

          constructor() { }

          ngOnInit() {
          }

          ngOnChanges(changes: SimpleChanges): void {
            // 监听title变化
            if (changes.title) {
              this.titleChangeNumber ++;
              const newTitle = changes.title.currentValue.replace(/\d/g, '');
              this.myTitle = newTitle;
            }
          }
          /**
           * 菜单点击事件
           */
          changeMenu(index) {
            this.data.forEach(element => {
              element.active = false;
            });
            this.data[index].active = true;
            // 将切换已经激活的菜单的index告诉父组件
            this.changes.emit(index);
          }

          /**
           * 运行当前时间
           */
          startTimer() {
            window.clearInterval(this.intervalId);
            this.intervalId = window.setInterval(() => {
              this.nowTime = new Date().getTime();
            }, 1000);
          }
          /**
           * 停止运行时间
           */
          stopTimer() {
            window.clearInterval(this.intervalId);
            this.intervalId = null;
          }
        }

        `,
        htmlCode1: `
        <div class="card" >
          <div class="card-header text-center">{{title}}</div>
          <ul class="list-group list-group-flush">
            <li *ngFor="let item of data;"let i = index;"
            [ngClass]="{'disabled': item.disabled, 'active': item.active}"
            (click)="changeMenu(i)"
            class="list-group-item"">{{item.name}}</li>
          </ul>
        </div>
        <hr />
        <h5 class="my-3">菜单标题被改变了 <span class="text-danger">{{titleChangeNumber}}</span> 次</h5>`
    },
    lesson4codeSix: {
      tsCode: `
        import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-lesson4',
          templateUrl: './lesson4.component.html',
          styleUrls: ['./lesson4.component.scss']
        })
        export class Lesson4Component implements OnInit {

          @ViewChild('menu') menu: Lesson4MenuComponent; // 通过ViewChild引入子组件
          menuActiveIndex = 0;

          /**
           * 右侧菜单配置
           */
          menuTitle = '组件之间的交互';
          menuData = [
            { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true},
            { name: '这是个被禁止的菜单', disabled: true, active: false},
            { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false},
            { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false},
            { name: '父组件监听子组件的事件', disabled: false, active: false},
            { name: '父组件与子组件通过本地变量互动', disabled: false, active: false},
            { name: '父组件调用@ViewChild()', disabled: false, active: false},
            { name: '父组件和子组件通过服务来通讯', disabled: false, active: false}
          ];
          constructor() { }

          ngOnInit() {
            // 初始化后执行改变标题的方法
            this.changeMenuTitle();
          }

          /**
           * 改变菜单的标题
           */
          changeMenuTitle() {
            setInterval(() => {
              const num = new Date().getSeconds();
              this.menuTitle = \`组件之间的交互\${num}\`;
            }, 1000);
          }

          /**
           *
           * 接收到子组件的消息，并设置menuActiveIndex
           */
          changeMenu($event) {
            // 接收到子组件的消息，并设置menuActiveIndex
            this.menuActiveIndex = $event;
          }

          /**
           * 上页和下页
           */
          goToMenu(type) {
            type === 'prev' ? this.menu.prevMenu() : this.menu.nextMenu();
          }
        }

      `,
      htmlCode: `
        <div class="pr-3 text-secondary" [ngClass]="{'text-success': menu.intervalId !== null}">
          当前时间为：{{menu.nowTime | date: 'yyyy-MM-dd HH:mm:ss'}}
        </div>
        <div class="btns pr-5">
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="menu.intervalId !== null" (click)="menu.startTimer()"><i class="fa fa-play fa-fw"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="menu.intervalId === null" (click)="menu.stopTimer()"><i class="fa fa-stop fa-fw"></i>
          </button>
        </div>
        <div class="btns">
          <button type="button" class="btn btn-sm btn-outline-secondary" (click)="goToMenu('prev')"><i class="fa fa-angle-left fa-fw"></i>上一页</button>
          <button type="button" class="btn btn-sm btn-outline-secondary" (click)="goToMenu('next')"><i class="fa fa-angle-right fa-fw"></i>上一页</button>
        </div>
        <!--子组件-->
        <app-lesson4-menu #menu [title]="menuTitle" [data]="menuData" [menuActiveIndex]="menuActiveIndex" (changes)="changeMenu($event)"></app-lesson4-menu>`,
        tsCode1: `
          import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

          @Component({
            selector: 'app-lesson4-menu',
            templateUrl: './lesson4-menu.component.html',
            styleUrls: ['./lesson4-menu.component.scss']
          })
          export class Lesson4MenuComponent implements OnInit, OnChanges {
            myTitle = '';
            @Input() data: any;
            @Input() menuActiveIndex: any = 0;
            @Output() changes: EventEmitter<any> = new EventEmitter();
            @Input()
            set title(title: string) {
              const newTitle = title.replace(/\d/g, '');
              this.myTitle = newTitle;
            }

            get title(): string { return this.myTitle; }

            titleChangeNumber = 0;

            nowTime = new Date().getTime(); // 当前时间

            intervalId = 0; // 定时器ID

            constructor() { }

            ngOnInit() {
            }

            ngOnChanges(changes: SimpleChanges): void {
              // 监听title变化
              if (changes.title) {
                this.titleChangeNumber ++;
                const newTitle = changes.title.currentValue.replace(/\d/g, '');
                this.myTitle = newTitle;
              }
            }
            /**
             * 菜单点击事件
             */
            changeMenu(index) {
              this.data.forEach(element => {
                element.active = false;
              });
              this.data[index].active = true;
              // 将切换已经激活的菜单的index告诉父组件
              this.changes.emit(index);
            }

            /**
             * 运行当前时间
             */
            startTimer() {
              window.clearInterval(this.intervalId);
              this.intervalId = window.setInterval(() => {
                this.nowTime = new Date().getTime();
              }, 1000);
            }
            /**
             * 停止运行时间
             */
            stopTimer() {
              window.clearInterval(this.intervalId);
              this.intervalId = null;
            }

            /**
             * 上一页
             */
            prevMenu() {
              this.menuActiveIndex --;
              if (this.menuActiveIndex  < 0) {
                this.menuActiveIndex = this.data.length - 1;
              }
              const isDisabledMenu = this.isDisabledMenu(this.menuActiveIndex);
              if (isDisabledMenu) {
                this.prevMenu();
              } else {
                this.changeMenu(this.menuActiveIndex);
              }
            }

            /**
             * 下一页
             */
            nextMenu() {
              this.menuActiveIndex ++;
              if (this.menuActiveIndex > this.data.length - 1) {
                this.menuActiveIndex = 0;
              }
              const isDisabledMenu = this.isDisabledMenu(this.menuActiveIndex);
              if (isDisabledMenu) {
                this.nextMenu();
              } else {
                this.changeMenu(this.menuActiveIndex);
              }
            }
            /**
             * 判断是否为disabled的菜单
             */
            isDisabledMenu(index) {
              return this.data[index].disabled;
            }
          }

        `,
        htmlCode1: `
        <div class="card" >
          <div class="card-header text-center">{{title}}</div>
          <ul class="list-group list-group-flush">
            <li *ngFor="let item of data;"let i = index;"
            [ngClass]="{'disabled': item.disabled, 'active': item.active}"
            (click)="changeMenu(i)"
            class="list-group-item"">{{item.name}}</li>
          </ul>
        </div>
        <hr />
        <h5 class="my-3">菜单标题被改变了 <span class="text-danger">{{titleChangeNumber}}</span> 次</h5>`
    },
    lesson4codeSeven: {
      pCode: `
        import { Injectable } from '@angular/core';

        @Injectable({
          providedIn: 'root'
        })
        export class Lesson4ServiceService {

          menuHeightColor = 'primary';

          constructor() {
          }
        }

        `,
      tsCode: `
        import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-lesson4',
          templateUrl: './lesson4.component.html',
          styleUrls: ['./lesson4.component.scss'],
          providers: [ Lesson4ServiceService ]
        })
        export class Lesson4Component implements OnInit {

          @ViewChild('menu') menu: Lesson4MenuComponent; // 通过ViewChild引入子组件
          menuActiveIndex = 0;

          /**
           * 右侧菜单配置
           */
          menuTitle = '组件之间的交互';
          menuData = [
            { name: '通过输入型绑定把数据从父组件传到子组件。', disabled: false, active: true},
            { name: '这是个被禁止的菜单', disabled: true, active: false},
            { name: '通过 setter 截听输入属性值的变化', disabled: false, active: false},
            { name: '通过ngOnChanges()来截听输入属性值的变化', disabled: false, active: false},
            { name: '父组件监听子组件的事件', disabled: false, active: false},
            { name: '父组件与子组件通过本地变量互动', disabled: false, active: false},
            { name: '父组件调用@ViewChild()', disabled: false, active: false},
            { name: '父组件和子组件通过服务来通讯', disabled: false, active: false}
          ];
          constructor(private lesson4Service: Lesson4ServiceService) { }

          ngOnInit() {
            // 初始化后执行改变标题的方法
            this.changeMenuTitle();
          }

          /**
           * 改变菜单的标题
           */
          changeMenuTitle() {
            setInterval(() => {
              const num = new Date().getSeconds();
              this.menuTitle = \`组件之间的交互\${num}\`;
            }, 1000);
          }

          /**
           *
           * 接收到子组件的消息，并设置menuActiveIndex
           */
          changeMenu($event) {
            // 接收到子组件的消息，并设置menuActiveIndex
            this.menuActiveIndex = $event;
          }

          /**
           * 上页和下页
           */
          goToMenu(type) {
            type === 'prev' ? this.menu.prevMenu() : this.menu.nextMenu();
          }
          /**
           * 高亮切换
           */
          changeMenuHeightColor($event) {
            this.lesson4Service.changeMenuHeightColor($event);
          }
        }

      `,
      htmlCode: `
        <div class="pr-3 text-secondary" [ngClass]="{'text-success': menu.intervalId !== null}">
          当前时间为：{{menu.nowTime | date: 'yyyy-MM-dd HH:mm:ss'}}
        </div>
        <div class="btns pr-5">
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="menu.intervalId !== null" (click)="menu.startTimer()"><i class="fa fa-play fa-fw"></i>
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="menu.intervalId === null" (click)="menu.stopTimer()"><i class="fa fa-stop fa-fw"></i>
          </button>
        </div>
        <div class="btns">
          <button type="button" class="btn btn-sm btn-outline-secondary" (click)="goToMenu('prev')"><i class="fa fa-angle-left fa-fw"></i>上一页</button>
          <button type="button" class="btn btn-sm btn-outline-secondary" (click)="goToMenu('next')"><i class="fa fa-angle-right fa-fw"></i>上一页</button>
        </div>
        <!--子组件-->
        <app-lesson4-menu #menu [title]="menuTitle" [data]="menuData" [menuActiveIndex]="menuActiveIndex" (changes)="changeMenu($event)"></app-lesson4-menu>

        <div class="alert alert-primary mt-4">
            <div class="form-group">
              <label for="formGroupExampleInput">菜单高亮样式切换</label>
              <select (change)="changeMenuHeightColor($event.target.value)" class="form-control">
                <option>primary</option>
                <option>secondary</option>
                <option>success</option>
                <option>danger</option>
                <option>warning</option>
                <option>info</option>
                <option>light</option>
                <option>dark</option>
              </select>
            </div>
          </div>`,
        tsCode1: `import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';

        @Component({
          selector: 'app-lesson4-menu',
          templateUrl: './lesson4-menu.component.html',
          styleUrls: ['./lesson4-menu.component.scss']
        })
        export class Lesson4MenuComponent implements OnInit, OnChanges {
          heightColor = 'primary'; // 定义样式名称
          myTitle = '';
          @Input() data: any;
          @Input() menuActiveIndex: any = 0;
          @Output() changes: EventEmitter<any> = new EventEmitter();
          @Input()
          set title(title: string) {
            const newTitle = title.replace(/\d/g, '');
            this.myTitle = newTitle;
          }

          get title(): string { return this.myTitle; }

          titleChangeNumber = 0;

          nowTime = new Date().getTime(); // 当前时间

          intervalId = 0; // 定时器ID

          constructor(private lesson4Service: Lesson4ServiceService) {
            this.lesson4Service.changeMenuHeightColorObs.subscribe((res) => {
              this.heightColor = res;
            });
          }

          ngOnInit() {
          }

          ngOnChanges(changes: SimpleChanges): void {
            // 监听title变化
            if (changes.title) {
              this.titleChangeNumber ++;
              const newTitle = changes.title.currentValue.replace(/\d/g, '');
              this.myTitle = newTitle;
            }
          }
          /**
           * 菜单点击事件
           */
          changeMenu(index) {
            this.data.forEach(element => {
              element.active = false;
            });
            this.data[index].active = true;
            // 将切换已经激活的菜单的index告诉父组件
            this.changes.emit(index);
          }

          /**
           * 运行当前时间
           */
          startTimer() {
            window.clearInterval(this.intervalId);
            this.intervalId = window.setInterval(() => {
              this.nowTime = new Date().getTime();
            }, 1000);
          }
          /**
           * 停止运行时间
           */
          stopTimer() {
            window.clearInterval(this.intervalId);
            this.intervalId = null;
          }

          /**
           * 上一页
           */
          prevMenu() {
            this.menuActiveIndex --;
            if (this.menuActiveIndex  < 0) {
              this.menuActiveIndex = this.data.length - 1;
            }
            const isDisabledMenu = this.isDisabledMenu(this.menuActiveIndex);
            if (isDisabledMenu) {
              this.prevMenu();
            } else {
              this.changeMenu(this.menuActiveIndex);
            }
          }

          /**
           * 下一页
           */
          nextMenu() {
            this.menuActiveIndex ++;
            if (this.menuActiveIndex > this.data.length - 1) {
              this.menuActiveIndex = 0;
            }
            const isDisabledMenu = this.isDisabledMenu(this.menuActiveIndex);
            if (isDisabledMenu) {
              this.nextMenu();
            } else {
              this.changeMenu(this.menuActiveIndex);
            }
          }
          /**
           * 判断是否为disabled的菜单
           */
          isDisabledMenu(index) {
            return this.data[index].disabled;
          }
          /**
           * 获取样式
           */
          getHeightColorClass(item) {
            const classes = {};
            return item.active ? classes['list-group-item-' + this.heightColor] = true && classes : '';
          }
        }

        `,
      htmlCode1: `
        <div class="card" >
        <div class="card-header text-center">{{title}}</div>
        <ul class="list-group list-group-flush">
          <li *ngFor="let item of data;let i = index;" [class.disabled]="item.disabled"
          [ngClass]="getHeightColorClass(item)" (click)="changeMenu(i)"
          class="list-group-item">{{item.name}}</li>
        </ul>
        </div>
        <ng-container *ngIf="menuActiveIndex == 2">
        <hr />
        <h5 class="my-3">菜单标题被改变了 <span class="text-danger">{{titleChangeNumber}}</span> 次</h5>
        </ng-container>`,
    }
  };
  static lesson5code = {
    lesson5codeOne: {
      html: `
        <form #form="ngForm" (ngSubmit)="submit(form)">
          <div class="form-group">
            <label>真实姓名</label>
            <input type="text" name="user" #user="ngModel"
              [(ngModel)]="data.user" class="form-control" autocomplete="username"
              required pattern="^[\u4e00-\u9fa5]+$" minlength="2" maxlength="4">
            <small [hidden]="!user.errors?.required"
              class="form-text text-danger">真实姓名不能为空</small>
            <small [hidden]="!user.errors?.pattern"
              class="form-text text-danger">真实姓名必须是中文</small>
            <small [hidden]="!user.errors?.minlength"
              class="form-text text-danger">真实姓名最少二位</small>
            <small [hidden]="!user.errors?.maxlength"
              class="form-text text-danger">真实姓名最多四位</small>
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">密码</label>
            <input type="password" name="password" #password="ngModel"
              required minlength="8" maxlength="20" [(ngModel)]="data.password"
              class="form-control" autocomplete="current-password">
          </div>

          <button type="submit" [disabled]="!form.valid" class="btn btn-primary">注册</button>
        </form>
        `,
      ts: `
        import { Component, OnInit } from '@angular/core';
        import { NgForm } from '@angular/forms';

        @Component({
          selector: 'app-lesson5-one',
          templateUrl: './lesson5-one.component.html',
          styleUrls: ['./lesson5-one.component.scss']
        })
        export class Lesson5OneComponent implements OnInit {

          data = {
            user: '',
            password: ''
          };
          constructor() { }

          ngOnInit() {
          }
          submit(form: NgForm) {
            const isValid = form.valid;
            alert(isValid);
          }
        }
        `
    }
  };
}
